<template>
    <div class="common-layout">
        <el-container>
            <div class="fullpage-main">
                <el-header>
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                        style="background-color: #85bbe5;">
                        <el-menu-item index="0">
                            <a href="http://localhost:5173/#/home">
                                <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.56GR4Ye5pn7h88g1ah5wNAAAAA?r=0&rs=1&pid=ImgDetMain" alt=""
                                    width="130" height="48">
                            </a>
                        </el-menu-item>
                        <el-menu-item index="1">
                            <div class="mb-4"><el-button round
                                    style="background-color: #409eff; color: #fff; font-size: larger; "
                                    @click="gotoregister">注册</el-button></div>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <div class="mb-4"><el-button round
                                    style="background-color: #409eff; color: #fff; font-size: larger; "
                                    @click="gotohome">返回首页</el-button></div>
                        </el-menu-item>
                    </el-menu>
                </el-header>
                <el-main>
                    <el-dialog v-model="centerDialogVisible" width="700" align-center>
                        <el-container class="flex-container" style="background-color: #fff;">
                            <el-image img="" style="width: 100px; height: 80px" :src="url" class="logo" />
                            <el-tabs v-model="activeName" class="demo-tabs">
                                <el-tab-pane label="账号登陆" name="first">
                                    <el-form :model="form" label-width="auto" style="max-width: 600px">
                                        <el-form-item label="">
                                            <el-input placeholder="用户名/Email/手机" v-model="phone" />
                                        </el-form-item>
                                        <el-form-item label="">
                                            <el-input placeholder="请输入登录密码" v-model="password" />
                                        </el-form-item>
                                        <el-form-item label="">
                                            <el-checkbox-group v-model="form.type">
                                                <el-checkbox value="Online activities" name="type">
                                                    下次自动登录
                                                </el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary" @click="handleLogin('password')"
                                                style="width: 500px; background-color: #f79000;">登录</el-button>
                                        </el-form-item>
                                        <el-button type="primary" @click="gotoregister"
                                            style="width: 100px;margin-left: 200px; color: #0095ff;background-color: #fff;border-color: #fff; font-size: larger;">立即注册</el-button>
                                    </el-form>
                                    <p style="font-size: 18px;">—————————更多登录方式—————————</p>
                                    <div class="login-methods-container">
                                        <div class="login-method">
                                            <img src=""
                                                alt="QQ图标">
                                            <p>QQ登录</p>
                                        </div>
                                        <div class="login-method">
                                            <img src=""
                                                alt="微信图标">
                                            <p>微信登录</p>
                                        </div>
                                        <div class="login-method">
                                            <img src=""
                                                alt="企业微信图标">
                                            <p>企业微信</p>
                                        </div>
                                    </div>
                                    <div class="agreement-container">
                                        <input type="checkbox" id="agreement-checkbox">
                                        <label for="agreement-checkbox">我已阅读并同意问卷星《用户服务协议》和《隐私条款》</label>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="验证码登录" name="second">
                                    <el-form>
                                        <el-form-item label="">
                                            <el-input placeholder="输入手机号码" v-model="phone" @input="checkPhoneFormat" />
                                        </el-form-item>
                                        <div v-if="phoneError" class="text-red-500 text-sm mt-2">
                                            请输入正确的11位手机号
                                        </div>
                                        <div v-if="isShowCodeInput">
                                            <el-form-item label="">
                                                <el-input v-model="form.code" placeholder="请输入验证码">
                                                    <template #suffix>
                                                        <el-button type="text" @click="gotocode"
                                                            :disabled="countdown > 0" class="custom-suffix-btn">
                                                            {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
                                                        </el-button>
                                                    </template>
                                                </el-input>
                                            </el-form-item>
                                        </div>
                                        <el-form-item>
                                            <el-button type="primary" @click="handleLogin('code')"
                                                style="width: 500px; background-color: #f79000;">登录</el-button>
                                        </el-form-item>
                                        <el-button type="primary" @click="gotoregister"
                                            style="width: 100px;margin-left: 200px; color: #0095ff;background-color: #fff;border-color: #fff; font-size: larger;">立即注册</el-button>
                                    </el-form>
                                    <p style="font-size: 18px;">—————————更多登录方式—————————</p>
                                    <div class="login-methods-container">
                                        <div class="login-method">
                                            <img src="" alt="QQ图标">
                                            <p>QQ登录</p>
                                        </div>
                                        <div class="login-method">
                                            <img src="" alt="微信图标">
                                            <p>微信登录</p>
                                        </div>
                                        <div class="login-method">
                                            <img src="" alt="企业微信图标">
                                            <p>企业微信</p>
                                        </div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </el-container>
                    </el-dialog>
                </el-main>
            </div>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch, reactive, inject } from 'vue'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import request from '@/request'
import { ElMessage } from 'element-plus'

const countdown = ref<number>(0);
const router = useRouter()
const activeIndex = ref('1')
const centerDialogVisible = ref(false)
const phone = ref('')
const password = ref('')
const code = ref('')
const isShowCodeInput = ref(false)
const phoneError = ref(false)
const activeName = ref('first')
const login_type = ref('')
const url = ref('')
const form = reactive({
    name: '',
    type: [],
    code: 'string'
})
//正则
const phoneReg = /^1[3-9]\d{9}$/
const checkPhoneFormat = () => {
    const isValid = phoneReg.test(phone.value || '')
    isShowCodeInput.value = isValid
    phoneError.value = !isValid
}
onMounted(() => {
    centerDialogVisible.value = true
})

function gotocode() {
    request({
        url: '/code/',
        method: 'post',
        data: {
            phone: phone.value
        }
    }).then(response => {
        if (response.status == 200) {
            ElMessage.success('短信发送成功')
        }
    })
}
const handleLogin = (type: string) => {
    login_type.value = type
    login_user()
}
//注入setLoggedIn
const setLoggedIn = inject<(value: boolean) => void>('setLoggedIn')

const login_user = async () => {
    try {
        if (login_type.value === 'password' && (!phone.value || !password.value)) {
            ElMessage.error('手机号和密码不能为空');
            return;
        }
        if (login_type.value === 'code' && (!phone.value || !code.value)) {
            ElMessage.error('手机号和验证码不能为空');
            return;
        }
        const response = await request({
            url: '/login/',
            method: 'post',
            data: {
                phone: phone.value,
                password: password.value,
                code: code.value,
                login_type: login_type.value,
            },
        });
        localStorage.setItem('token', response.data.token);
        localStorage.setItem('phone', phone.value);
        localStorage.setItem('activeIndex', '9');
        if (setLoggedIn) {
            setLoggedIn(true)
        }
        ElMessage.success('登录成功')
        router.push('/mycontent');
    } catch (error) {
        ElMessage.error(error.response?.data?.message || '登录失败');
    }
};
function gotohome() {
    router.push({ path: '/home' })
}
function gotoregister() {
    router.push({ path: '/register' })
}
</script>
<style scoped>
.fullpage-main {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.el-menu--horizontal>.el-menu-item:nth-child(1) {
    margin-right: auto;
}

.fullpage-wrapper .member .btn {
    font-size: 18px;
    line-height: 2;
    margin-left: 20px;
    border:
        1px solid #fff;
    border-radius: 100px;
    background-color: transparent;
}

.custom-suffix-btn {
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
    color: #409eff;
    /* 按钮文字颜色 */
    background: transparent;
    /* 背景透明 */
    border-left: 1px solid #ebeef5;
    /* 左侧分隔线 */
    border-radius: 0;
    /* 取消圆角 */
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.flex-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    background-color: rgb(240, 231, 231);
}

.logo {
    flex-shrink: 0;
}

.demo-tabs {
    width: auto;
    height: auto;
    margin: 0;
}

.demo-tabs>.el-tabs__header {
    background-color: #fff;
}

.demo-tabs>.el-tabs__content {
    padding-top: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.login-methods-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    padding: 50px 0;
}

.login-method {
    text-align: center;
}

.login-method img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ddd;
    padding: 5px;
}

.login-method p {
    margin-top: 10px;
    color: #666;
    font-size: 16px;
}

.agreement-container {
    text-align: center;
    margin-top: 20px;
}

.agreement-container input {
    margin-right: 10px;
}

.agreement-container label {
    color: #666;
    font-size: 14px;
    text-decoration: none;
}

.agreement-container a {
    color: #007BFF;
    text-decoration: none;
}

.agreement-container a:hover {
    text-decoration: underline;
}
</style>